import { Switch } from 'antd';
import { useState } from 'react'
import { useMount, useReactive } from 'ahooks';

import { MultiRow } from '@grapecity/wijmo.react.grid.multirow';

import { MultiRowConfig } from '../Data'



const WijmoN05 = () => {

    const InitData = useReactive({
        init: null
    })

    const [Data, setData] = useState()
    const [TableType, setTableType] = useState()

    const [AddState, setAddState] = useState(true)
    const [DelState, setDelState] = useState(true)

    useMount(() => {
        const { TableType, data } = MultiRowConfig(5)
        setData(data)
        setTableType(TableType.Detailed)
    })

    const init = (init) => {
        InitData.init = init
    }

    return (
        <div className="Page">
            <MultiRow
                itemsSource={Data}
                layoutDefinition={TableType}
                showGroups={false}
                allowAddNew={AddState}
                allowDelete={DelState}
                initialized={init}
            />
            <div className="Label">
                <label htmlFor=""> 新增 </label>
                <Switch defaultChecked={AddState} onChange={setAddState} />
            </div>
            <div className="Label">
                <label htmlFor=""> 删除 </label>
                <Switch defaultChecked={DelState} onChange={setDelState} />
            </div>
        </div>
    );
};

export default WijmoN05